import React, { useState, useEffect } from 'react'
import styles from './index.less'
import { useEventTarget } from 'ahooks';
import searchIcon from '../../../assets/search/searchIcon.png'
import { useDispatch, useLocation, useSelector } from 'dva';
import { useIntl } from 'umi';
import InViewPort from '../../../components/InViewPort'
function Index() {
  const [value, { reset, onChange }] = useEventTarget({ initialValue: '' });
  const dispatch = useDispatch()
  const {
    exhibitor2021List,
    exhibitor2021PageIndex,
    exhibitor2021LastPage,

  } = useSelector(({ index }) => index)
  function handelSearch() {
    dispatch({
      type: 'index/apiGetExhibitor2021',
      payload: {
        pageSize: 10,
        page: 0,
        name: value
      },
      isReset: true
    })
  }

  useEffect(() => {
    dispatch({
      type: 'index/apiGetExhibitor2021',
      payload: {
        pageSize: 10,
        page: 0,
        searchWord: value
      },
      isReset: true
    })
  }, [])

  function onEnter() {
    // console.log(productPageIndex, productLastPage, 'productLastPage')
    if (exhibitor2021PageIndex < exhibitor2021LastPage) {
      dispatch({
        type: 'index/apiGetExhibitor2021',
        payload: {
          pageSize: 10,
          page: exhibitor2021PageIndex + 1,
          searchWord: value
        }
      })
    }

  }
  const intl = useIntl();
  return (
    <div className={styles.page}>
      <div className={styles.searchBox} >
        <input onChange={onChange} placeholder={intl.formatMessage({ id: 'SEARCH_KEYWORDS' })} value={value}></input>
        <img src={searchIcon} onClick={handelSearch}></img>
      </div>
      <div className={styles.content}>
        {/* {
          data.map((item, index) => {
            return <div key={'item' + index} className={styles.itemBox}>
              <p>馆号 {item.venueNumber}</p>
              <div className={styles.listBox}>
                {
                  item.data.map((vo, i) => {
                    return <InViewPort onEnter={onEnter} key={i}>
                      <div className={styles.item}>
                        <p className={styles.typeId}>
                          <span className={styles.id}>{vo.id}</span>
                          <span className={styles.type}>{vo.type}</span>
                        </p>
                        <p className={styles.company}> {vo.company}</p>
                        <p className={styles.text}>{vo.text}</p>
                      </div>
                    </InViewPort>
                  })
                }
              </div>
            </div>
          })
        } */}
        {
          exhibitor2021List && exhibitor2021List.map((item, index) => {
            if (index == (exhibitor2021List.length - 1)) {
              return <InViewPort onEnter={onEnter} key={index}>
                <div className={styles.item}>
                  <p className={styles.typeId}>
                    <span className={styles.id}>{item.boothNumber}</span>
                    <span className={styles.type}>{item.properties.exhibitCategories}</span>
                  </p>
                  <p className={styles.company}> {item.name}</p>
                  <p className={styles.text}>{item.nameEn}</p>
                </div>
              </InViewPort>
            }
            return <div className={styles.item}>
              <p className={styles.typeId}>
                <span className={styles.id}>{item.boothNumber}</span>
                <span className={styles.type}>{item.properties.exhibitCategories}</span>
              </p>
              <p className={styles.company}> {item.name}</p>
              <p className={styles.text}>{item.nameEn}</p>
            </div>
          })
        }
      </div>
    </div>
  )
}

export default Index
